<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Flotr: Color Gradients Example</title>
    <link rel="stylesheet" href="style.css" type="text/css" />

    <script type="text/javascript" src="../../flotr/prototype/lib/prototype.js"></script>
    <script type="text/javascript" src="examples.js"></script>
    
    <!--[if IE]><script type="text/javascript" src="../../flotr/prototype/lib/excanvas.js"></script><![endif]-->
    <script type="text/javascript" src="../../flotr/prototype/lib/base64.js"></script>
    
    <script type="text/javascript" src="../../flotr/prototype/lib/canvas2image.js"></script>
    <script type="text/javascript" src="../../flotr/prototype/lib/canvastext.js"></script>
    <script type="text/javascript" src="../../flotr/prototype/flotr.js"></script>
  </head>
  <body>
  	
    <!-- ad -->
		
    <div id="wrapper">
      <h1></h1>
      <div id="container" style="width:600px;height:300px;">
      </div>
      <h2>Example</h2>
      <p>
        Random bar graph with color gradient
      </p>
      <p>
        Finished? Go to the example <a href="index.html" title="Flotr Example Index Page">index page</a>, play with the <a href="../../playground/index.html" title="Flotr playground">playground</a>
        or read the <a href="http://www.solutoire.com/flotr/docs/" title="Flotr Documentation Pages">Flotr Documentation Pages</a>.
      </p>
      <h2>The Code</h2>
      <pre id="code-view"><code class="javascript"></code></pre>
      <div id="footer">
        Copyright &copy; 2008 Bas Wenneker, <a href="http://www.solutoire.com">solutoire.com</a>
      </div>
    </div>
    <!-- ad -->
    <script type="text/javascript">
      /**
       * Wait till dom's finished loading.
       */
      document.observe('dom:loaded', function(){
      	/**
      	 * Fill series with random values.
      	 */
      	var i, point, bars = {
      		data: [],
      		bars: {
      			show: true,
      			barWidth: 0.8,
      			lineWidth: 0,
      			fillColor: {
      				colors: ['#CB4B4B', '#fff'],
      				start: 'top',
      				end: 'bottom'
      			},
      			fillOpacity: 0.8
      		}
      	}, markers = {
      		data: [],
      		markers: {
      			show: true,
      			position: 'ct'
      		}
      	}, lines = {
					data: [],
					lines: {
						show: true,
						fillColor: ['#00A8F0', '#fff'],
						fill: true,
						fillOpacity: 1
					}
				};
      	
      	for (i = 0; i < 8; i++) {
      		point = [i, Math.ceil(Math.random() * 10)];
      		bars.data.push(point);
      		markers.data.push(point);
      	}
				
				for (i = -1; i < 9; i += 0.01){
          lines.data.push([i, i*i/8+2]);
				}
      	
      	/**
      	 * Draw the graph in the first container.
      	 */
      	Flotr.draw($('container'), [lines, bars, markers], {
      		yaxis: {
      			min: 0,
						max: 11
      		},
					xaxis: {
            min: -0.5,
            max: 7.5
          },
      		grid: {
      			verticalLines: false,
      			backgroundColor: ['#fff', '#ccc']
      		}
      	});
      });
    </script>
		
    <!-- analytics -->
		
  </body>
</html>
